<template>
  <div class="service-root">
    <div class="left test-1" :class="{ empty_center: cusInfoList.length == 0 }">
      <a-empty
        v-if="cusInfoList.length == 0"
        description="休息一下吧,列表为空"
      />
      <ul>
        <template v-for="(item, index) in cusInfoList" :key="index + 100">
          <a-badge :count="item.unread">
            <li
              class="online"
              @click="
                selectChat(
                  cusInfoList[index].cusId +
                    ',' +
                    adminInfo.storeId +
                    ',' +
                    index
                )
              "
              :class="{
                current: cusInfoList[index].cusId == currCusInfo.cusId,
              }"
            >
              <a-avatar :size="48" :src="item.cusAvatar"></a-avatar>
              <div style="margin-left: 10px">
                <h1>{{ item.cusNackName }}</h1>
                <p style="margin: 0">
                  {{ item.position.substring(0, 7) }}
                </p>
              </div>
            </li>
          </a-badge>
        </template>
      </ul>
    </div>
    <div class="center">
      <a-result title="选择客户进行聊天" v-if="messageLog.length <= 0">
        <template #icon>
          <smile-twoTone />
        </template>
      </a-result>
      <div
        class="msg-box test-1"
        ref="myScrollbar"
        v-show="messageLog.length > 0"
      >
        <ul>
          <template v-for="(item, index) in messageLog" :key="index + 2000">
            <li class="customer" v-if="item.sendId == currCusInfo.cusId">
              <a-avatar :size="36" :src="currCusInfo.cusAvatar"></a-avatar>
              <div>
                <h1>
                  {{ currCusInfo.cusNackName
                  }}<span class="date">{{ item.sendTime }}</span>
                </h1>
                <div class="msg-context">
                  <p>
                    {{ item.msg }}
                  </p>
                </div>
              </div>
            </li>

            <li class="me" v-else>
              <div>
                <h1>
                  <span class="date">{{ item.sendTime }}</span> 我
                </h1>
                <div class="msg-context">
                  <p>
                    {{ item.msg }}
                  </p>
                </div>
              </div>
              <a-avatar
                :size="36"
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              ></a-avatar>
            </li>
          </template>
        </ul>
      </div>
      <div class="input" v-if="messageLog.length > 0">
        <a-textarea
          placeholder="输入内容"
          allow-clear
          :autoSize="{ minRows: 5, maxRows: 5 }"
          v-model:value="textareaValue"
        />
        <div class="button" @click="sendMsg()">发送</div>
      </div>
    </div>
    <div class="right">
      <div class="customer-info">
        <a-skeleton
          avatar
          :paragraph="{ rows: 4 }"
          v-if="currCusInfo.cusId == ''"
        />
        <div
          v-show="currCusInfo.cusId != ''"
          style="width: 100%; height: 100%; text-align: center"
        >
          <div id="container"></div>
          <a-avatar :size="64" :src="currCusInfo.cusAvatar"></a-avatar>
          <div>
            <span>{{ currCusInfo.cusNackName }}</span>
            <ManOutlined v-if="!currCusInfo.cusSex" style="color: blue" />
            <WomanOutlined style="color: red" v-else />
          </div>
        </div>
      </div>
      <div class="pro-info">
        <h1 class="title">ta正在浏览</h1>
        <a-skeleton :paragraph="{ rows: 4 }" v-if="currCusInfo.cusId == ''" />
        <div class="top" v-if="currCusInfo.cusId != ''">
          <img width="128" height="128" :src="proInfo.proIcon" />
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <p class="lable" v-if="!proInfo.isDiscount">
              当前售价: <span>{{ "￥" + proInfo.proPrice }}</span>
            </p>
            <p class="lable" v-if="proInfo.isDiscount">
              当前售价:
              <span>{{ "￥" + (proInfo.proPrice - proInfo.proDis) }}</span>
            </p>
            <p class="lable">
              进价:
              <span style="color: red; font-weight: 800">{{
                "￥" + proInfo.proCost
              }}</span>
            </p>
            <p class="lable">
              商品名: <span>{{ proInfo.proName }}</span>
            </p>
          </div>
        </div>
        <div class="bottom" v-if="currCusInfo.cusId != ''">
          <h1>{{ proInfo.proTitle }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  ManOutlined,
  WomanOutlined,
  SmileTwoTone,
} from "@ant-design/icons-vue";
import Base64 from "base-64";
export default {
  components: {
    ManOutlined,
    WomanOutlined,
    SmileTwoTone,
  },
  data() {
    return {
      textareaValue: "",
      adminInfo: {},
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState(["cusInfoList", "messageLog", "currCusInfo", "proInfo"]),
  },
  updated() {
    this.scrollDown();
  },
  methods: {
    ...mapActions(["getMessageLog"]),
    ...mapMutations(["send", "currCusIdChange"]),

    //从sessionStore中获取店铺信息
    init() {
      this.adminInfo = JSON.parse(
        decodeURIComponent(Base64.decode(sessionStorage.getItem("userInfo")))
      );
    },
    selectChat(index) {
      this.getMessageLog(index);
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/macaron", //设置地图的显示样式
        zoom: 9,
      });
      let position = "用户位置:" + this.currCusInfo.position;
      let rectangle = this.currCusInfo.rectangle.split(",");
      var marker = new AMap.Marker({
        position: rectangle, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: position,
      });
      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);

      console.log(rectangle);
      var infoWindow = new AMap.InfoWindow({
        content: position,
      });

      infoWindow.open(map, rectangle);
      window.map = map;
    },
    //发消息
    sendMsg() {
      if (!(this.textareaValue == "")) {
        const msg = {
          receiveId: this.currCusInfo.cusId, //需要换成接收者信息
          receiveAvatar: this.currCusInfo.cusAvatar,
          sendId: this.adminInfo.adminId,
          storeId: this.adminInfo.storeId,
          sendTime: "2020-12-12 23:12:12",
          msg: this.textareaValue,
          type: "1",
        };

        this.$store.commit("send", msg);

        this.textareaValue = "";
      }
    },
    //聊天置地
    scrollDown() {
      this.$refs.myScrollbar.scrollTop = this.$refs.myScrollbar.scrollHeight;
    },
  },
};
</script>

<style lang="less" scoped>
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  background: transparent;
}

.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  border-radius: 10px;

  background: transparent;
}
.service-root {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
  display: flex;
  width: 100%;
  height: 90vh;
}
.service-root .empty_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-root .left {
  flex: 1;
  background: #f5f5f8;
  height: 100%;
  overflow: hidden auto;
  border-right: 10px solid #fff;
}
.service-root .left ul {
  margin: 0;
  padding: 20px 0px 20px 10px;
}
.service-root .left ul > span {
  width: 90%;
  display: block;
}

.service-root .left ul li {
  height: 80px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px 0 rgb(10 10 10 / 20%);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  padding-left: 5px;
}
.service-root .left ul .online {
  border-left: 10px solid#00d26b;
}
.service-root .left ul .current {
  background-color: #007afa;
  color: #fff;
}
.service-root .left ul .current h1 {
  color: #fff;
}
.service-root .left ul li > div {
  margin-left: 5px;
}

.service-root .center {
  flex: 3;
  background: #f5f5f8;
  height: 100%;
}
.service-root .center .msg-box {
  height: 80%;
  overflow: hidden auto;
}
.service-root .center .input {
  margin-top: 5px;
  height: 15%;
  position: relative;
}
.service-root .center .input .button {
  position: absolute;
  top: 82px;
  right: 10px;
  color: white;
  background: rgb(24, 128, 255);
  width: 60px;
  height: 32px;
  line-height: 32px;
  font-size: 13px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}
.service-root .center .msg-box ul li {
  position: relative;
}
.service-root .center .msg-box ul li .date {
  font-size: 10px;
  font-weight: normal;
}
.service-root .center .msg-box ul .customer {
  display: flex;
  margin-bottom: 10px;
}
.service-root .center .msg-box ul .customer > div {
  margin-left: 10px;
}
.service-root .center .msg-box ul li > div h1 {
  margin-bottom: 5px;
}
.service-root .center .msg-box ul .me {
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-end;
}
.service-root .center .msg-box ul .me > div {
  margin-right: 10px;
}
.service-root .center .msg-box ul .me > div h1 {
  text-align: right;
}
.service-root .center .msg-box ul .me .msg-context {
  display: flex;
  justify-content: flex-end;
}
.service-root .center .msg-box ul .me .msg-context p {
  background: #d7ebfa;
  color: #414141;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  word-break: normal;
  display: inline-block;
  max-width: 80%;
}
.service-root .center .msg-box ul .customer .msg-context p {
  background: #fff;
  color: #414141;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  word-break: normal;
  display: inline-block;
  max-width: 80%;
}

.service-root .right {
  flex: 1.5;
  background: #f5f5f8;
  padding: 20px 10px;
}

.service-root .right .customer-info {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px 0 rgb(10 10 10 / 20%);
  margin-bottom: 10px;
  height: 50%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.service-root .right .customer-info span {
  font-size: 20px;
  line-height: 30px;
  font-weight: 800;
  margin-right: 10px;
}

.service-root .right .pro-info {
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px 0 rgb(10 10 10 / 20%);
  margin-bottom: 10px;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.service-root .right .pro-info .top {
  display: flex;
}
.service-root .right .pro-info .top > div {
  margin-left: 10px;
}
.service-root .right .pro-info .top > div .lable {
  font-size: 16px;
  text-align: right;
}
.service-root .right .pro-info .title {
  text-align: center;
  font-weight: 800;
  margin-bottom: 10px;
}
.service-root .right .pro-info .bottom {
  margin-top: 20px;
}

#container {
  width: 100%;
  height: calc(100% - 100px);
}
</style>